<template>
	<view class="form-page">
		<view class="person-msg-content">
			<view class="person-msg-details" v-if="fieldMsgArray.length != 0" v-for="(item,index) in fieldMsgArray" :key='index'>
				<view class="msg-tip" style="letter-spacing: 0;">{{item.name}}</view>
				<view class="msg-input">
					<input type="text" v-model="item.value" :placeholder="item.placeholder"/>
					<view class="is-required">
						<image v-if="item.state == 1" :src="imglink + 'member/manage-active_icon_CheckBox_selected.png'" mode=""></image>
						<image v-else :src="imglink + 'member/manage-active_icon_CheckBox_normal.png'" mode=""></image>
						<text>是否必填</text>
					</view>
				</view>
			</view>
		</view>
		<view class="field-content" v-if="clickFlag == 1">
			<view class="act_explain-title">
				<view class="explain-title">
					<view class=""></view>
					<view class="">
						默认可选字段
					</view>
				</view>
				<view class="explain_tip" @click="addField" >
					+添加新字段
				</view>
			</view>
			<view class="field-details" >
				<view :class="fieldListIndex.indexOf(item.field_id) !== -1?'field-details-active':'field-details-noselect'" v-for="(item,index) in fieldList" :key='index' @click="chooseMsg(item)">
					{{item.name | goodName_val}}
					<image v-if="item.canDelete!=false" class="del-filed" @click.stop="delField(item.field_id)" :src="imglink + 'member/manage-active_icon_delete.png'" mode=""></image>
				</view>
			</view>
		</view>
<!-- 		<view class="save-field" @click="saveField">
			保存
		</view> -->
		<!-- 删除门店确认 -->
		<uni-popup ref="delField" :custom="true">
			<view class="popup_box_de_del">
				<view class="popup_box-tip">
					删除字段确认
				</view>
				<view class="popup_box-reminder">
					是否删除该字段，删除后无法恢复
				</view>
				<view class="popup_box-click">
					<view class="" @click="delSucced">确认删除</view>
					<view class="" @click="cancelDel">取消</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除成功 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				删除成功
			</view>
		</view>
		<!-- 添加新信息收集字段 -->
		<uni-popup ref="actPublish" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'home/popup-close.png'" @click="closeState"></image>
				<view class="popup_box_content">
					<view class="popup_box_title">
						<view class="popup-line"></view>
						<view class="">添加新信息收集字段</view>
						<view class="popup-line"></view>
					</view>
					<view class="field-name">
						<view class="">
							字段名称
						</view>
						<input type="text" v-model="fieldName" placeholder="请输入字段名称" />
					</view>
					<view class="field-name">
						<view class="">
							字段类型
						</view>
						<view class="field-type">
							<radio-group @change="radioChange" style="justify-content: space-between;">
								<label class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in fieldType" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="index === current" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="field-name">
						<view class="">
							是否必填
						</view>
						<view class="field-type">
							<radio-group @change="radioChangeRequired">
								<label style="margin-right: 30upx;" class="uni-list-cell uni-list-cell-pd type-common" v-for="(item, index) in isRequired" :key="index">
									<view>
										<radio :value="item.value" color='#FF8B46' :checked="index === currentRequired" />
									</view>
									<view>{{item.name}}</view>
								</label>
							</radio-group>
						</view>
					</view>
					<view class="sure-add-btn" @click="sureAdd">
						确定添加
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../../../components/uni-popup/uni-popup.vue'
	export default{
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length >4) {
					return value.slice(0, 4) + '...'
				}
				return value
			},
		},
		components:{uniPopup},
		props:['store_id','token','clickFlag','page_operate'],
		data(){
			return {
				imglink: this.$store.state.imgLink,
				first_in:true,
				// token:'',
				// store_id:0,
				sexType:[
					{src:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_selected.png',name:'男'},
					{src:'https://tool.tuanhaoke.cn/static/image/member/manage-active_icon_normal.png',name:'女'},
				],
				fieldList:[],
				fieldListIndex:[],
				fieldType:[
					// {name:'图片',value:'0',check:'true'},
					{name:'文字',value:'1',},
					// {name:'时间',value:'2',}
				],
				fieldTypeText:'0',
				current:0,
				isRequired:[
					{name:'必填',value:'1',check:'true'},
					{name:'选填',value:'0',},
				],
				isRequiredText:'1',
				currentRequired:0,
				fieldName:'',
				saveList:[],
				fieldMsgArray:[],
				saveState:false,
				delFieldId:''
			}
		},
		// onLoad(options) {
		// 	console.log('-------------------------------');
		// 	let store_id = parseInt(options.store_id,10);
		// 	if(!store_id>0){
		// 		store_id = uni.getStorageSync('store_id')
		// 	}else{
		// 		uni.setStorageSync('store_id', store_id)
		// 	}
		// 	this.store_id = store_id
		// 	this.$store.commit('updateStoreId',store_id)
			
		// 	let token = options.token;
		// 	if(!token){
		// 		token = uni.getStorageSync('token')
		// 	}else{
		// 		uni.setStorageSync('token', token);
		// 	}
			
		// 	this.token = token
		// 	console.log('tttttttttttttttttt',token);
		// 	this.$store.commit('updateToken',token)
			
		// },
		mounted(){
			console.log('this.store_id',this.store_id);
			console.log('this.token',this.token);
			this.getField()
			this.first_in = false
		},
		onUnload() {
			// this.$store.state.actForm = this.fieldMsgArray
		},
		methods:{
			delSucced(){
				let data = {
					token:this.$store.getters.getToken,
					field_id:this.delFieldId
				}
				this.$api.del_field(data).then(res => {
					console.log(res)
					if(res.status){
						this.$refs.delField.close()
						this.saveState = true
						setTimeout(()=>{
							this.saveState = false
							this.getField()
						},1000)
					}
					for(let i=0;i<this.fieldListIndex.length;i++){						
						if( this.delFieldId == this.fieldListIndex[i]){
							this.fieldMsgArray.splice(i,1)
							this.fieldListIndex.splice(i,1)
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancelDel(){
				this.$refs.delField.close()
			},
			delField(id){
				this.delFieldId = id
				this.$refs.delField.open()
			},
			chooseMsg(info){
				// console.log(this.fieldMsgArray,'this.fieldMsgArray')
				// console.log(this.fieldListIndex,'this.fieldListIndex')
				
				let infoMsg = {
					id:'',
					value:'',
					name:'',
					state:"",
					placeholder:''
				}
				
				let exist_field = false;
				let exist_index = 0;
				for(let i=0;i<this.fieldListIndex.length;i++){
					
					if( info.field_id == this.fieldListIndex[i]){
						// fieldListIndex.indexOf(item.field_id) !== -1
						exist_field = true;
						exist_index = i;
						break;
					}
				}
				
				if(exist_field){
					this.fieldMsgArray.splice(exist_index,1)
					this.fieldListIndex.splice(exist_index,1)
				}else{
					infoMsg.id = info.field_id
					infoMsg.state = info.required
					infoMsg.name = info.name
					infoMsg.placeholder = '请输入' + info.name
					this.fieldMsgArray.push(infoMsg)
					this.fieldListIndex.push(info.field_id);
				}
				this.$emit('getActForm',this.fieldMsgArray)
				// console.log(this.fieldMsgArray,'fkjsdhfkisdbhf')
				// console.log(this.fieldListIndex,'fieldListIndexfieldListIndex')
			 },
			saveField(){
				console.log('保存');
				 // this.$store.state.actForm = this.fieldMsgArray
				 // this.$emit('getActForm',this.fieldMsgArray)
				 // let data = {
					//  token:this.$store.getters.getToken,
					//  infomation:JSON.stringify(this.fieldMsgArray)
				 // }
				 // this.$api.save_act_form_msg(data).then(res => {
					//  console.log(res)
					//  if(res.status){
					// 	 uni.showToast({
					// 	 	title:'保存成功',
					// 		icon:'none',
					// 		duration:2000
					// 	 })
					// 	setTimeout(()=>{
					// 		uni.navigateBack({
					// 			delta:1
					// 		})
					// 	},1000)
					//  }else{
					// 	 uni.showToast({
					// 	 	title:res.msg,
					// 		icon:'none',
					// 		duration:2000
					// 	 })
					//  }
				 // }).catch(err =>{
					//  console.log(err)
				 // })
			 },
			getField(){
				// 默认字段
				let defaultField =  [{
				    "field_id": 261, 
				    "store_id": 0, 
				    "name": "报名科目", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "field_id": 262, 
				    "store_id": 0, 
				    "name": "孩子姓名", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "field_id": 263, 
				    "store_id": 0, 
				    "name": "联系电话", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "field_id": 264, 
				    "store_id": 0, 
				    "name": "孩子年龄", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "field_id": 265, 
				    "store_id": 0, 
				    "name": "孩子性别", 
				    "type": 1, 
				    "required": 1, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}, 
				{
				    "field_id": 266, 
				    "store_id": 0, 
				    "name": "身高（选填）", 
				    "type": 1, 
				    "required": 0, 
				    "status": 1, 
				    "is_delete": 0,
						"canDelete":false
				}]
				
				let data = {
					token:this.token,
					store_id:this.store_id
				}
				this.$api.get_field_list(data).then(res => {
					console.log(res,'get_field_list')
					if(res.status){
						this.fieldList = res.list
						for(let i = 5;i>=0;i--){
							this.fieldList.unshift(defaultField[i])
						}
						console.log(uni.getStorageSync('editActAdd'),"uni.getStorageSync('editActAdd')");
							console.log(this.fieldMsgArray,"this.fieldMsgArray");
						if(this.fieldMsgArray.length==0){
							this.fieldMsgArray = uni.getStorageSync('editActAdd').actFormMsg
							if( Object.prototype.toString.call(this.fieldMsgArray)== '[object Array]'){
								this.fieldListIndex=[]
								this.fieldMsgArray.forEach(item => {
									this.fieldListIndex.push(item.id)
								})
							}else{
								this.fieldListIndex=[]
								this.fieldMsgArray = [];
							}
						}
					}
					// if(this.page_operate == 'add'){
					// 	for(let i = 0; i< 3;i++){
					// 		this.chooseMsg(defaultField[i])
					// 	}
					// }
					
				}).catch( err => {
					console.log(err)
				})
			},
			addField(){
				this.$refs.actPublish.open()
			},
			closeState(){
				this.$refs.actPublish.close()
			},
			radioChange: function(evt) {
				this.fieldTypeText = evt.target.value
				console.log(this.fieldTypeText,'字段类型')
				for (let i = 0; i < this.sexType.length; i++) {
					if (this.sexType[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
				
			},
			radioChangeRequired: function(evt) {
				for (let i = 0; i < this.isRequired.length; i++) {
					if (this.isRequired[i].value === evt.target.value) {
						this.currentRequired = i;
						this.isRequiredText = evt.target.value
						console.log(this.isRequiredText,'是否必填')
						break;
					}
				}
			},
			// 添加活动字段
			sureAdd(){
				if(this.fieldName == ''){
					uni.showToast({
						title:'请输入字段名称',
						icon:"none",
						duration:2000
					})
					return false
				}
				let data = {
					token:this.token,
					store_id:this.$store.getters.getStoreId,
					name:this.fieldName,
					type:this.fieldTypeText,
					required:this.isRequiredText,
					status:1
				}
				this.$api.add_act_field(data).then( res => {
					console.log(res)
					if(res.status){
						uni.showToast({
							title:'添加成功',
							icon:"none",
							duration:2000
						})
						setTimeout(()=>{
							this.$refs.actPublish.close()
							this.getField()
						},2000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch( err =>{
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	/* 删除地址成功标识css */
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	/* 弹框样式 */
	.popup_box_de_del{
		height: 336upx;
		width: 640upx;
		background: #FFFFFF;
		border-radius: 24upx;
		padding-top: 40upx;
		box-sizing: border-box;
	}
	.popup_box-tip{
		text-align: center;
		color: #353535;
		font-size: 36upx;
		font-weight: 800;
	}
	.popup_box-reminder{
		width: 544upx;
		text-align: center;
		padding: 0 10upx;
		box-sizing: border-box;
		color: #666666;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 30upx;
	}
	.popup_box-click{
		width: 100%;
		height: 112upx;
		margin-top: 80upx;
		border-top: 1upx solid rgba(0, 0, 0, 0.1);
		display: flex;
	}
	.popup_box-click>view{
		width: 50%;
		line-height: 112upx;
		text-align: center;
		font-size: 34upx;
	}
	.popup_box-click>view:first-child{
		color: #000000;
		border-right: 1upx solid rgba(0, 0, 0, 0.1);
	}
	.popup_box-click>view:last-child{
		color: #FF8B46;
	}
	.add-shop-manage{
		width: 638upx;
		height: 88upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 32upx;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 152upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
	}
	.del-icon>image{
		width: 48upx;
		height: 48upx;
		margin-top: 58upx;
	}
	/* 添加新信息收集字段 */
	.popup_box_de{
		height: 848upx;
		width: 590upx;
		position: relative;
		/* z-index: 999; */
	}
	.popup_box_close{
		width: 56upx;
		height: 56upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content{
		width: 100%;
		height: 784upx;
		background: #FFFFFF;
		position: absolute;
		top: 64upx;left: 0;
		z-index: 999;
		border-radius: 16upx;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.popup_box_title{
		width: 100%;
		display: flex;
	}
	.popup-line{
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 64upx;
		margin-right: 12upx;
	}
	.popup-line:first-child{
		margin-left: 28upx ;
	}
	.popup-line:last-child{
		margin-left: 12upx;
	}
	.popup_box_title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
	}
	.field-name{
		display: flex;
		width: 100%;
		height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-top: 60upx;
	}
	.field-name>view:first-child{
		width: 27%;
		text-align: center;
		line-height: 80upx;
		background: #ECECEC;
		color: #333333;
		font-size: 28upx;
	}
	.field-name>input{
		flex-grow: 1;
		height: 80upx;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
	radio-group{
		padding: 0 20upx 0 26upx;
		box-sizing: border-box;
	}
	.field-type,radio-group{
		flex-grow: 1;
		display: flex;
	}
	.type-common{
		display: flex;
	}
	.type-common>view>radio{
		transform:scale(0.8);
	}
	.type-common>view{
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
	}
	.sure-add-btn{
		width: 480upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		border-radius: 44upx;
		font-size: 32upx;
		color: #FFFFFF;
		box-shadow: 0 8upx 16upx 0 rgba(166, 13, 0, 0.23);
		background: linear-gradient(to right,#FE9543,#FF664F);
		margin: 0 auto;
		margin-top: 80upx;
	}
	page{
		background: #F3F3F4;
	}
	.form-page{
		width: 100%;
		height: 100%;
	}
	.person-msg-content{
		width: 100%;
		padding-left: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.person-msg-details{
		width: 100%;
		padding: 32upx 30upx 28upx 0;
		box-sizing: border-box;
		display: flex;
		border-bottom: 1upx solid #DEDEDE;
	}
	.person-msg-details:last-child{
		border-bottom: 0;
	}
	.msg-tip{
		width: 112upx;
		color: #666666;
		font-size: 28upx;
		text-align: center;
		padding-top: 0upx;
		box-sizing: border-box;
	}
	.msg-input{
		flex-grow: 1;
		display: flex;
		margin-left: 40upx;
	}
	.msg-input>input{
		flex-grow: 1;
		font-size: 28upx;
	}
	.is-required{
		display: flex;
		margin-top: 8upx;
	}
	.is-required>image{
		width: 28upx;
		height: 28upx;
	}
	.is-required>text{
		color: #999999;
		font-size: 22upx;
	}
	.sex-child{
		display: flex;
		flex-grow: 1;
	}
	.sex-common image{
		width: 32upx;
		height: 32upx;
		margin-top: 4upx;
	}
	.sex-common{
		display: flex;
		margin-right: 100upx;
	}
	.sex-common>view{
		font-size: 28upx;
		color: #333333;
		margin-left: 10upx;
	}
	.field-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 18upx;
	}
	.act_explain-title{
		display: flex;
		justify-content: space-between;
	}
	.explain-title{
		display: flex;
		margin-top: 4upx;
	}
	.explain-title>view:first-child{
		width: 8upx;
		height: 32upx;
		background: #FF8B46;
		vertical-align: middle;
		margin-top: 6upx;
	}
	.explain-title>view:last-child{
		color: #333333;
		font-size: 30upx;
		margin-left: 10upx;
		font-weight: 800;
	}
	.explain_tip{
		width: 176upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		border: 1upx solid #FF8B46;
		color: #FF8B46;
		font-size: 24upx;
		border-radius: 40upx;
	}
	.field-details{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.field-details>view{
		width: 152upx;
		height: 56upx;
		text-align: center;
		line-height: 56upx;
		font-size: 28upx;
		border-radius: 28upx;
		margin-right: 20upx;
		margin-top: 26upx;
		position: relative;
	}
	.field-details-noselect{
		background: #F2F2F2;
	}
	.field-details-active{
		background: #FF8B46;
		color: #FFFFFF;
	}
	.save-field{
		width: 638upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0 auto;
		margin-top: 212upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx ;
		box-shadow: 0 4upx 12upx 0 #8CFAB030;
	}
	.del-filed{
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: -14upx;right: -12upx;
	}
</style>
